<template>
  <div>
    <KanbanDesigner
      :thumbnail="{ enabled: true, type: 'jpeg', scale: 0.6 }"
      @thumbnail="thumbnail"
      :kanban-fetch-fn="kanbanFetchFn"
      :kanban-submit-fn="kanbanSubmitFn"
      :kanban-release-fn="kanbanReleaseFn"
    />
  </div>
</template>

<script lang="ts" setup>
  import type { KanbanInputDto } from '@/api/report/admin/kanban/model';

  import { KanbanDesigner } from '@eacloud/kanban';

  import { createKanban, updateKanban } from '@/api/report/admin/kanban';
  import { getKanbanNodeById } from '@/api/report/kanban';

  defineOptions({ name: 'KanbanDesigner' });

  /** 缩略图事件 */
  function thumbnail(_imageBase64: any, _imageFile: any) {
    // console.log('thumbnail', { imageBase64, imageFile });
  }

  /** 看板数据请求函数 */
  async function kanbanFetchFn(id: any) {
    // console.log('fetchKanbanFn', id);
    const result = await getKanbanNodeById(id);
    return result?.Content ? JSON.parse(result.Content) : {};
  }
  /** 看板数据提交函数 */
  async function kanbanSubmitFn(data: any, action: any) {
    // console.log('submit', { data, action });
    const dto: KanbanInputDto = {
      Id: data.id,
      Name: data.name,
      Thumbnail: data.thumbnail,
      Remarks: data.remarks,
      Released: data.released === true,
      Content: JSON.stringify({ ...data, thumbnail: undefined }),
    };
    try {
      dto.Id = action === 'A' ? '0' : dto.Id;
      const result = action === 'A' ? await createKanban([dto]) : await updateKanban([dto]);
      if (result) {
        return {
          succeeded: result.Succeeded,
          id: result.Data[0]?.Id,
          message: result.Content,
        };
      }
      return { succeeded: false, id: '' };
    } catch (ex: any) {
      return { succeeded: false, id: '', message: ex?.message };
    }
  }
  /** 看板数据发布函数 */
  async function kanbanReleaseFn(data: any, action: any) {
    // console.log('release', { data, action });
    const dto: KanbanInputDto = {
      Id: data.id,
      Name: data.name,
      Thumbnail: data.thumbnail,
      Remarks: data.remarks,
      // Released: data.released === true,
      Released: true,
      Content: JSON.stringify({ ...data, thumbnail: undefined }),
    };
    try {
      dto.Id = action === 'A' ? '0' : dto.Id;
      const result = action === 'A' ? await createKanban([dto]) : await updateKanban([dto]);
      if (result) {
        return {
          succeeded: result.Succeeded,
          id: result.Data[0]?.Id,
          message: result.Content,
        };
      }
      return { succeeded: false, id: '' };
    } catch (ex: any) {
      return { succeeded: false, id: '', message: ex?.message };
    }
  }
</script>
